<template>
    <div>
            <header class="mui-bar mui-bar-nav bg-color">
                <!--返回按钮-->
                <span class="iconfont icon-fanhui header_fanhui" @tap="gotoMin"></span> 
                <!--标题-->
                <h1 class="mui-title" >关注分页</h1>
                <span v-if="attentList.length!=0" class="mui-pull-right Tit" @tap="compile">编辑</span>
            </header>

            <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 热门资讯 -->
                    <div class="info-list">
                        <div class="info-tab">
                            <ul class="mui-table-view mui-table-view-chevron"  v-for="(v,i) in attentList">
                                <div class="tab-item"  :style="{ 'border-top': !i? 'none' : '1px solid #F0F0F0'}">
                                    <div class="tab-item-left">
                                        <p style="height:40px;word-break:break-all;font-size:0.65rem;">{{v.carName}}</p>
                                        <p><span style="color:#DF7467;">{{(v.minAllPrice/10000).toFixed(2)}}万起</span></p>
                                        <p><span style="color:#DF7467;">{{v.quotedPriceNum}}</span>条报价</p>
                                    </div>
                                    <div class="tab-item-right">
                                        <img  v-lazy="$store.state.appData.imgUrl+v.seriesPic" >
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

             <!--空时显示-->
            <div class="empty ng-scope" v-if="attentList.length === 0 ">
                <div class="empty-item">
                    <div class="icon-zanwu-01" style="font-size:3rem;text-align:center;">
                        <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span>
                    </div>
                    <div class="item-text">暂无关注车型</div>
                </div>
            </div>
    </div>
</template>

<script>
    import mui from 'static/js/mui.js'
    import { getAllcarAttention,removeListcarAttention} from '@/api/carAttention'
     export default {
        components: {},
        data() {
            return{
                obj:{
                    customerId:this.$store.getters.user.id,
                    pageNow:0,
                    pageSize:5 
                },
                attentList:[
                ],
            }
        },
        props: {},
        watch: {},
        methods: {
            gotoMin(){
                this.$router.push({
                    path:"/min"
                })
            },
            compile(){
                this.$router.push({
                    path:"/attentCompile"
                })
            },
    
            // 下拉刷新具体业务实现
            pulldownRefresh() {
                var that=this
                setTimeout(function() {
                    var type=1;//代表下拉刷新
                    that.toList(that.obj,type);//具体取数据的方法
                }, 1000);
            },

            //上拉加载具体业务实现
            pullupRefresh() {
                var that=this
                setTimeout(function() {
                    ++that.obj.pageNow
                    //console.log(that.obj.pageNow)
                    var type=2;//代表上拉加载
                    that.toList(that.obj,type);//具体取数据的方法
                }, 1000);
            },

            // ajxa渲染数据
            toList(data,type){
                // plus.nativeUI.showWaiting("等待中....",{padlock: true});//数据出来前显示等待加载框
                //console.log(type)
                var arr = new Array();
                 getAllcarAttention(data).then(resp => {
                    // //console.log(resp)
                    
                    if(type==1){//上拉刷新
                        //console.log(data)
                        this.attentList =resp.data.attentionCars
                        //console.log(this.attentList)
                    }
                    if(type==2){//下拉加载
                        //console.log(data)
                        this.attentList=this.attentList.concat(resp.data.attentionCars)
                        //console.log(this.attentList)
                    }
                    // 
                })
            },
           
        },
        filters: {},
        computed: {},
        created() {
        },
        mounted() {
            var that=this
        mui.init({
            pullRefresh: {
                    container: '#pullrefresh',
                    //下拉刷新
                    down: {
                        style:'circle',
                        contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                        contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                        contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                        callback: function(){
                            that.pulldownRefresh()
                        }
                    },
                    //上拉加载
                    up: {
                        auto:true,
                        contentrefresh: '正在加载...',
                        callback: function(){
                            that.pullupRefresh()
                        }
                    }
                }
            });
        },
        destroyed() { }
    }
</script>

<style lang="scss" scoped>
    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:3;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .info-list{
        width:100%;
        height:auto;
        /* margin-top:44px; */
        .info-top{
            overflow:hidden;
            background:#fff;
            color:#333333;
            font-size:0.7rem;
            padding:8px 12px  8px 12px;
        }
        .info-tab{
          .tab-item{
              width:100%;
              background:#fff;
              overflow:hidden;
              padding:12px 12px 12px 12px;
              .tab-item-left{
                  float:right;
                  width:58%;
                  height:90px;
                  p{
                      line-height:20px;
                      padding-bottom:0px;
                      font-size:0.6rem;
                  }
              }
              .tab-item-right{
                  float:right;
                  width:42%;
                    height:90px; 
                  text-align:center;
                  img{
                      height:100%;
                  }
              }
          }
        }
    }   
     /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:43px;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 40%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
</style> 
    